<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-table :data="dataList" height="450" style="width: 100%;margin: 5px;">
            <el-table-column prop="" label="序号" fixed align="center" width="90" >
                <template slot-scope="scope">
                    {{scope.$index+1}}
                </template>
            </el-table-column>
            <el-table-column prop="partName" label="零件名称" fixed align="center" width="170" ></el-table-column>
            <el-table-column prop="partUnit" label="单位" fixed align="center" width="" ></el-table-column>
            <el-table-column prop="partCubage" label="体积" fixed align="center" width="" ></el-table-column>
            <el-table-column prop="partWeight" label="重量" fixed align="center" width="" ></el-table-column>
            <el-table-column prop="" label="入库总数量" fixed align="center" width="" >
                <template slot-scope="scope">
                    {{scope.row.sumInStoreCount || 0}}
                </template>
            </el-table-column>
            <el-table-column prop="" label="出库总数量" fixed align="center" width="" >
                <template slot-scope="scope">
                    {{scope.row.outStoreCount || 0}}
                </template>
            </el-table-column>
            <el-table-column prop="" label="剩余库存量" fixed align="center" width="" >
                <template slot-scope="scope">
                    {{scope.row.partStore}}
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                style="margin-top: 10px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            dataList: [],
            total: 0,
            currentPage: 1,
            pageSize: 10
        },
        methods: {
            getList(){
                let _this = this;

                selectAjax("get","/printManagement/queryInventory",{
                    "currentPage": _this.currentPage,
                    "pageSize": _this.pageSize,
                },function (data) {
                    _this.total = data.data.total;
                    _this.dataList = data.data.inventoryList;
                })
            },
            handleSizeChange(val){
                let _this = this;
                _this.pageSize = val;
                _this.getList();
            },
            handleCurrentChange(val){
                let _this = this;
                _this.currentPage = val;
                _this.getList();
            }
        },
        mounted(){
            this.getList();
        }
    })
</script>
</html>